<template>
	<view class="container">
		<view class="top-card">
			<view class="top">
				<view class="left">
					<image class="avatar" :src="userInfo.headimg || avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="name-wrap">
							<text class="name" v-if="userInfo.driver">{{ userInfo.driver.real_name }}</text>
							<text class="name" v-else>请登录</text>
							<text class="state idle">休息中...</text>
						</view>
						<view class="rate">
							<image class="icon" src="/static/icon_rate.svg" mode="aspectFit"></image>
							<text class="t">服务分：211</text>
						</view>
					</view>
				</view>
				<view></view>
				<view class="btn-wrap">
					<uv-button type="primary" color="linear-gradient(to right, #f09366, #ec676f)">开始接单</uv-button>
				</view>
			</view>
			<view class="btm-wrap">
				<view class="item">
					<text class="t t1">今日流水</text>
					<text class="t t2">￥367.86</text>
				</view>
				<view class="item">
					<text class="t t1">今日接单</text>
					<text class="t t2">12</text>
				</view>
				<view class="item">
					<text class="t t1">今日在线</text>
					<text class="t t2">3时24分</text>
				</view>
			</view>
		</view>
		<view class="list-wrap">
			<scroll-view class="scroll-y" scroll-y @scrolltolower="scrollBottom">
				<view class="item" v-for="item in listData.list" :key="item.id">
					<view class="row">
						<view class="title">
							<text class="t">专车</text>
							<view class="time">{{ dayjs(item.create_time, 'YYYY年MM月DD日 HH:mm:ss').format('M月DD日 HH:mm') }}</view>
						</view>
						<!-- <view class="status">
								<text class="t status2">已完成</text>
							</view> -->
					</view>
					<view class="info">
						<view class="info-row">
							<view class="dot"></view>
							<text class="t">{{ item.start_address }}</text>
						</view>
						<view class="info-row">
							<view class="dot"></view>
							<text class="t">{{ item.end_address }}</text>
						</view>
					</view>
					<view class="btm">
						<view class="t2">
							<text>预计收入：</text>
							<text class="i">￥</text>
							<text class="p">{{ item.price }}</text>
						</view>
						<uv-button type="primary" color="linear-gradient(to right, #202531, #161b27)" @click="confirmOrder(item)">立即接单</uv-button>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="footer">
			<view class="btn">
				<uv-button type="success" shape="circle" size="large" color="linear-gradient(to right, #202531, #161b27)">下线休息</uv-button>
			</view>
		</view> -->
		<!-- 申请成为司机弹窗 -->
		<view class="apply-popup" v-if="userInfo.identity_code == '002' && userInfo.identity_status != 4">
			<view class="apply-warp">
				<view class="apply-warp-title">
					<text class="t">注意</text>
				</view>
				<view class="apply-warp-content">
					<text class="t" v-if="userInfo.identity_status == 0">您还未申请成为司机，请申请通过后开始接单</text>
					<text class="t" v-if="userInfo.identity_status == 1">账号已禁用</text>
					<text class="t" v-if="userInfo.identity_status == 2">平台正在审核中，请您耐心等待，预计1-3个工作日内审核完成</text>
					<text class="t" v-if="userInfo.identity_status == 3">审核已拒绝，请重新提交申请</text>
				</view>
				<view class="apply-popup-footer">
					<navigator class="btn" hover-class="active" url="/pages/register/register" v-if="userInfo.identity_status == 0">
						<text class="t">申请司机</text>
					</navigator>
					<view class="btn" hover-class="active" v-if="userInfo.identity_status == 1">
						<text class="t">联系客服</text>
					</view>
					<view class="btn" hover-class="active" v-if="userInfo.identity_status == 2">
						<text class="t">审核中...</text>
					</view>
					<view class="btn" hover-class="active" v-if="userInfo.identity_status == 3">
						<text class="t">重新申请...</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import avatar from '@/static/default_avatar.png';
import useStorage from '../../utils/useStorage';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { getUserInfo } from '@/utils/api.js';
import socketService from '../../utils/socket';
import { getOrder, acceptOrder } from '@/utils/api.js';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
// 注册插件
dayjs.extend(customParseFormat);

const globalData = getApp().globalData;

const userInfo = ref(useStorage.get('userInfo'));

function init() {
	const token = useStorage.get('token');
	if (!token) {
	} else {
		listenSocketMessage();
		getOrderAjax();
	}
}

// 确认接单
async function confirmOrder(item) {
	try {
		// uni.showLoading({
		// 	title: '接单中...',
		// 	mask: true
		// });
		// const res = await acceptOrder({
		// 	order_id: item.id
		// });

		// uni.showToast({
		// 	title: '已接单',
		// 	mask: true,
		// 	duration: 1500
		// });

		// setTimeout(() => {
		// 	uni.navigateTo({
		// 		url: `/pages/index/going?order_id=${item.id}`
		// 	});
		// }, 1000);

		uni.navigateTo({
			url: `/pages/index/going?order_id=4`
		});
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

let unsubscribe = null;
function listenSocketMessage() {
	unsubscribe = socketService.onMessage((message) => {
		let data = JSON.parse(message);
		// console.log('首页收到scoket', data);
	});
}

// 模拟循环获取定位信息
let locationTimer = null;
let count = 0;
function setGetLocation() {
	locationTimer = setInterval(() => {
		count++;
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			isHighAccuracy: true,
			success: function (res) {
				console.log(`获取当前位置${count}：`, res);
				useStorage.set('location', {
					longitude: res.longitude,
					latitude: res.latitude,
					name: res.address
				});
			},
			fail: function (err) {
				// 失败时引导用户去设置
				uni.showModal({
					title: '提示',
					content: '需要获取您的位置信息，请在设置中授权',
					success(res) {
						if (res.confirm) {
							uni.openSetting();
						}
					}
				});
			}
		});
	}, 3000);
}

// 滚动到底部了
function scrollBottom() {
	console.log('到底了');
	listData.page++;
	getOrderAjax();
}

// 更新用户信息
async function updateUserInfo() {
	try {
		const token = useStorage.get('token');
		if (token) {
			const res = await getUserInfo();
			useStorage.set('userInfo', res.account);
			userInfo.value = useStorage.get('userInfo');
		}
	} catch (error) {
		console.log(error);
	}
}

// 获取订单列表
const listData = reactive({
	page: 1,
	page_num: 10,
	list: [],
	finish: false
});
async function getOrderAjax() {
	try {
		const res = await getOrder({
			page: listData.page,
			page_num: listData.page_num
		});
		if (listData.page == 1) {
			listData.list = res.list;
		} else {
			listData.list.push(...res.list);
		}
	} catch (error) {
		console.log(error);
	}
}

onShow(() => {
	updateUserInfo();
});

onLoad(() => {
	init();
	// #ifdef APP
	setGetLocation();
	// #endif
});

onHide(() => {
	unsubscribe();
});
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style scoped lang="scss">
.container {
	--topH: 400upx;
	width: 100vw;
	overflow-x: hidden;
	.top-card {
		height: var(--topH);
		background: $linear-card;
		padding-top: calc(var(--status-bar-height) + 20px);
		.top {
			height: 40px;
			display: flex;
			justify-content: space-between;
			position: relative;
			.left {
				display: flex;
				position: absolute;
				width: 100%;
				left: $padding;
				top: 50%;
				transform: translateY(-50%);
				.avatar {
					$size: 88upx;
					width: $size;
					height: $size;
					border-radius: 50%;
					border: 4upx solid #fff;
				}
				.info {
					padding-left: 20upx;
					.name-wrap {
						display: flex;
						align-items: center;
						.name {
							color: #fff;
							font-weight: bold;
							font-size: 32upx;
						}
						.state {
							font-size: 20upx;
							color: #fff;
							border-radius: 8upx;
							margin-left: 12upx;
							padding: 4upx 12upx;
							&.idle {
								background: rgba(255, 255, 255, 0.3);
							}
							&.use {
								background: $color-btn2;
							}
						}
					}
					.rate {
						display: flex;
						gap: 4upx;
						align-items: center;
						padding-top: 4upx;
						.icon {
							$size: 28upx;
							width: $size;
							height: $size;
							margin-left: -4upx;
						}
						.t {
							color: $uv-primary;
							font-size: 24upx;
						}
					}
				}
			}
			.btn-wrap {
				padding-right: 44upx;
				.btn {
					width: 200upx;
					height: 35px;
					border-radius: 8upx;
					background: $color-btn2;
					display: flex;
					align-items: center;
					justify-content: center;
					.t {
						color: #fff;
						font-size: 32upx;
						font-weight: bold;
					}
				}
			}
		}
		.btm-wrap {
			padding: 60upx 0 100upx 0;
			display: flex;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				&:nth-child(1),
				&:nth-child(2) {
					position: relative;
					&::after {
						content: '';
						height: 40upx;
						border-right: 1px solid rgba(255, 255, 255, 0.3);
						position: absolute;
						top: 50%;
						margin-top: -20upx;
						right: 0;
					}
				}
				.t {
					color: #fff;
				}
				.t1 {
					opacity: 0.8;
				}
				.t2 {
					font-size: 32upx;
					font-weight: bold;
				}
			}
		}
	}
	.list-wrap {
		background-color: #f5f5f5;
		margin-top: -50upx;
		border-radius: 40upx;
		padding: $padding;
		.scroll-y {
			height: calc(100vh - var(--topH));
			border-radius: 30upx;
			overflow: hidden;
		}
		.item {
			background-color: #fff;
			border-radius: 30upx;
			padding: 28upx;
			&:not(:last-child) {
				margin-bottom: $padding;
			}
			.row {
				padding-bottom: 28upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title {
					display: flex;
					align-items: center;
					gap: 8px;
					.t {
						padding: 2upx 10upx;
						border-radius: 2px;
						background-color: $uv-primary;
						color: #fff;
						font-size: 20upx;
					}
				}
				.status {
					.t {
						&.status1 {
							color: #797b90;
						}
						&.status2 {
							color: #8dbe2b;
						}
						&.status3 {
							color: #f29301;
						}
					}
				}
				.path {
					border: 1px solid #111;
					border-radius: 8upx;
					display: flex;
					align-items: center;
					padding: 4upx 16upx;
					.t {
						font-size: 24upx;
					}
					.icon {
						width: 50upx;
						height: 30upx;
					}
				}
			}
			.info {
				background-color: #fafafa;
				border-radius: 16upx;
				padding: 28upx;
				.info-row {
					display: flex;
					align-items: center;
					&:not(:last-child) {
						margin-bottom: 28upx;
					}
					.dot {
						$size: 12upx;
						width: $size;
						height: $size;
						border-radius: 50%;
						background-color: #797b90;
						margin-right: 16upx;
					}
					.t {
						color: #333;
					}
				}
			}
			.btm {
				padding-top: $padding;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $uv-primary;
				.p {
					font-weight: bold;
					font-size: 32upx;
				}
			}
		}
	}
	.footer {
		padding: $padding $padding calc($padding + env(safe-area-inset-bottom));
	}
	.apply-popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		justify-content: center;
		.apply-warp {
			width: 80%;
			background-color: #fff;
			border-radius: 40upx;
			padding: 0 28upx;
			.apply-warp-title {
				padding-top: 28upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.t {
					font-size: 32upx;
					font-weight: bold;
				}
			}
			.apply-warp-content {
				padding: 90upx 28upx;
				display: flex;
				justify-content: center;
			}
			.apply-popup-footer {
				padding-bottom: 28upx;
				.btn {
					height: 100upx;
					background: $color-btn;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16upx;
					&.active {
						opacity: 0.8;
					}
					.t {
						color: #fff;
					}
				}
			}
		}
	}
}
</style>
